<template>
    <view class="content">
     <view class="avatarWrapper">
		 <view class="avatar">
			 <image class="img" src="../../static/image/canpin.png" mode="widthFix"></image>
		 </view>
	 </view>
	 <view class="form">
		 <view class="inputWrapper">
			 <input class="input" v-model="username" type="text" value="" placeholder="请输入用户名" />
		 </view>
		 <view class="inputWrapper">
		 			 <input class="input" v-model="password" type="password" value="" placeholder="请输入密码" />
		 </view>
		 <view class="loginBtn">
		 	<button  class="bthValue" type="primary" @click="login">登录</button>
		 </view>
		 <view class="forgoBtn">
			 <button type="primary" @click="">找回密码</button>
		 </view>
	 </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				username:'18077799766',
				password:'1qaz2wx34',
			isText:'',
			}
		},
	
		methods: {
			asyuc login(){
				const res=await this.$myRequest({
					url:'api-portal/login',
					method:'post',
					data:{
						userName:this.username,
						password:this.password
					}
				})
				if(res.success==true){
					uni.switchTab({
						url:'pages/test/b'
					})
				}else{
					uni.showToast({
						title: '登录失败',
						mask: true,
						duration: 2000
					});
				}
			}
		   }
		}
	}
</script>

<style>
	.content{
		background: #377FB4;
		width: 100vw;
		height: 100vh;
	}
	.avatarWrapper{
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.avatar{
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}
	.avatar .img{
		width: 100%;
	}
	.form{
		padding: 0 100upx;
		margin-top: 80rpx;
	}
	.inputWrapper{
		width: 100%;
		height: 80rpx;
		background: white;
		border-radius: 20upx;
		box-sizing: border-box;
		padding: 0 20upx;
		margin-top: 25rpx;
	}
	.inputWrapper .input{
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15rpx;
	}
	.loginBtn{
		width: 100%;
		height: 80rpx;
		/* text-align: center; */
		background: #77B3D7;
		border-radius: 50rpx;
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.loginBtn .bthValue{
		width: 100%;
		height: 80rpx;
		color: white ;
	}
	.forgoBtn{
		text-align: center;
		color: #EAE6F9;
		font-size: 15rpx;
		margin-top: 20rpx;
	}

</style>
